<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div id="selfinfo" style="width: 500px;height: 500px;transform: translateY(-20px)" />
  </div>


</template>

<script>
  let echarts = require('echarts')
  export default {
    name: "selfinfo",
    props:['prop'],
    data(){
      return {
      }
    },

    methods:{
      init(){
        var data = {
          'name': '京东自营',
          'value': [this.prop.self.value],
          'nAmount':1566557.14
        };

       let  options = {
         title: {
            text: data.value[0] + '%',
            textStyle: {
              color: '#2A95F9',
              fontSize: 20
            },
            subtext: data.name + '占比',
            subtextStyle: {
              color: '#aaaaaa',
              fontSize: 15
            },
            itemGap: 20,
            left: 'center',
            top: '45%'
          },
          tooltip: {
            formatter: function(params) {
              return '<span style="color: #fff;">占比：' + params.value + '%</span>';
            }
          },
          angleAxis: {
            max: 100,
            clockwise: false, // 逆时针
            // 隐藏刻度线
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,

            },
            axisTick: {
              show: false
            },
          },
          polar: [{
            center: ['50%', '50%'], //中心点位置
            radius: '100%' //图形大小
          }],
          series: [{
            name: "大环",
            type: 'gauge',
            splitNumber: 12,
            radius: '90%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [1, '#1f59a7']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: 'auto',
                width: 3.5
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
            {
              name: '小环',
              type: 'gauge',
              splitNumber: 12,
              radius: '80%',
              center: ['50%', '50%'],
              startAngle: 0,
              endAngle: 359.9999,
              axisLine: {
                show: false
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: '#1f59a7',
                  width: 3
                },
                length: 20,
                splitNumber: 3
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              detail: {
                show: false
              }
            }, {
              type: 'bar',
              data: data.value,
              showBackground: true,
              polarIndex: 0,
              backgroundStyle: {
                color: '#022546',
                borderWidth: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 10,
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#008BFF'
                  }, {
                    offset: 1,
                    color: '#0071FF'
                  }]),
                  shadowBlur: 5,
                  shadowColor: '#2A95F9',
                }
              },
            }
          ]
        };
        let linearBarDom = echarts.getInstanceByDom(document.getElementById('selfinfo'))
        if(linearBarDom == null){
          linearBarDom = echarts.init(document.getElementById('selfinfo'))
        }
        linearBarDom.resize()
        linearBarDom.setOption(options,false)

      }
    },
    watch: {
      prop: {
        handler (val) {
          this.init()
        },
        deep: true
      }
    },
    mounted () {
      this.init()
    },

  }
</script>

<style scoped lang="scss">

</style>
